<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    li{
    list-style: none;
    }
    .nav>li{
    float: left;
    padding: 0 15px;
    line-height: 40px;
    /* text-align: center; */
    }
    .nav>li>a{
    font-size: 13px;
    color: black;
    font-weight: bold;
    }
    .nav_drop{
    position: relative;
    }
    .drop_down{
    position: absolute;/*设置绝对定位*/
    /*display: none;/*做之前可以先注释掉，这个是显示*/
    background: white;
    left: -12px;
    top: 48px;
    width: 89px;
    border: 1px solid #f1f1f1;
    padding: 0; 
    }
    .drop_down>li{
    padding: 0 20px;
    }
    .drop_down>li a{
        text-decoration: none;
        font-size: 12px;
        color: black;
    }
    .drop_down>li:hover, .drop_down>li>a:hover{ 
    background: #317EF3;
    color: white;
    }
    /* .nav_drop:hover .drop_down{
    display: block;
    } */
    .none{
        display: none;
        }
    .show{
        display: block;
    }
    .one{
        width: 0px;
        border:5px solid transparent;
        border-top-color: black;
        position: absolute;
        top: 19px;
        left: 44px;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="javascript: ;">新闻</a></li>
        <li><a href="javascript: ;">hao123</a></li>
        <li><a href="javascript: ;">地图</a></li>
        <li><a href="javascript: ;">视频</a></li>
        <li><a href="javascript: ;">贴吧</a></li>
        <li><a href="javascript: ;">学术</a></li>
        <li><a href="javascript: ;">登录</a></li>
        <li class="nav_drop">
            <a href="javascript: ;" id="toggle">设置</a>
            <div class="one"></div>
            <ul class="drop_down none" id="parent">
                <li><a href="javascript: ;">搜索设置</a></li>
                <li><a href="javascript: ;">高级搜索</a></li>
                <li><a href="javascript: ;">关闭预测</a></li>
                <li><a href="javascript: ;">隐私设置</a></li>
            </ul>
        </li>
    </ul>
    <script>
    var toggle = document.getElementById("toggle");
    var parent = document.getElementById("parent");
    toggle.onclick =()=>{
        if(parent.className =="none"){
            parent.className = "show drop_down"
        }else{
            parent.className ="none"
        }
        // parent.classList.toggle("none")
    }
    </script>
</body>
</html>